<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>填写调查问卷</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/preview.css">
  <link rel="stylesheet" href="./css/questionnaire.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>

</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="questionnaire">
    <!-- 问卷内容部分 -->
    <div class="questionnaire-content">
      <div class="questionnaire-list pc-preview">
        <div class="qr-code-icon" @click="handleQRClick">
          <img src="./images/questionnaire/small-qr-icon.png" alt="">
        </div>
        <el-form label-position="top">
          <el-form-item :label="questionnaireData.title" class="questionnaire-title">
          </el-form-item>
          <el-form-item :label="questionnaireData.desc" class="questionnaire-desc">
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item :label="(index+1)+'、'+titleResult(item)" v-for="(item,index) in questionnaireData.questionData"
            :key="item.id" class="question-list" :class="{red: errorIndex==index}">

            <!-- 单选题 -->
            <el-radio-group v-model="item.radio" v-if="item.type =='sc'" class="single-choice-question">
              <el-radio :label="choiceItem.label" v-for="(choiceItem,choiceIdx) in item.choice">{{choiceItem.title}}
              </el-radio>
              <el-radio :label="otherChoiceItem.label" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice">
                {{otherChoiceItem.title}}
                <el-input v-model="otherChoiceItem.inputValue" placeholder="其他选项"></el-input>
              </el-radio>
            </el-radio-group>

            <!-- 多选题 -->
            <el-checkbox-group v-model="item.checkList" v-if="item.type =='mc'" class="multiple-choice-question">
              <el-checkbox :label="choiceItem.label" v-for="(choiceItem,choiceIdx) in item.choice"
                :key="choiceItem.label">{{choiceItem.title}}
              </el-checkbox>
              <el-checkbox :label="otherChoiceItem.label" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice">
                {{otherChoiceItem.title}}
                <el-input v-model="otherChoiceItem.inputValue" placeholder="其他选项"></el-input>
              </el-checkbox>
            </el-checkbox-group>

            <!-- 单项填空 -->
            <el-input type="textarea" v-model="item.inputValue" placeholder="请输入内容" :rows="1" autosize
              v-if="item.type =='si'"></el-input>

            <!-- 多项填空 -->
            <el-form label-position="top" label-width="80px" :model="item" v-if="item.type =='mi'"
              class="multiple-input-question">
              <el-form-item :label="choiceItem.title" v-for="(choiceItem,choiceIdx) in item.choice">
                <el-input v-model="choiceItem.inputValue" type="textarea" :rows="1" autosize></el-input>
              </el-form-item>
            </el-form>

            <!-- 图片投票 -->

            <el-radio-group v-model="item.radio" v-if="item.type =='iu'" class="image-vote-question">
              <div class="image-vote-question-item" v-for="(iuItem,index) in item.choice">
                <el-image style="width: 100px; height: 100px" :src="iuItem.url" :preview-src-list="iuItem.srcList">
                </el-image>
                <el-radio :label="iuItem.radio">{{iuItem.title}}</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-row class="submit-row">
          <el-button type="primary" style="width: 160px;" @click="submitForm">提交</el-button>
        </el-row>
      </div>
      <el-row class="bottom-tip">
        <span style="color: #333;">泽众软件</span>提供技术支持
      </el-row>

    </div>

  </div>

  </div>


</body>
<script>
  var Main = {
    data() {
      return {
        num: -1,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
        ],
        currentTabIndex: 1,
        radio: "",
        checked1: "",
        questionnaireData: {},
        errorIndex: -1
      }
    },

    mounted() {
      let getLocalData = localStorage.getItem('questionnaireData');
      this.questionnaireData = JSON.parse(getLocalData)
    },
    methods: {
      handleTypeSwitchClick(index) {
        this.currentTabIndex = index
      },
      handle() {
        console.log(123);
      },
      handleQRClick() {
        this.$alert('<img src="./images/questionnaire/QR-Code.png">', 'HTML 片段', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          title: "手机扫码作答"
        });
      },
      submitForm() {
        const qData = this.questionnaireData.questionData

        qData.some((item, index) => {
          if ((item.type === "sc" && item.radio == "") || (item.type === "mc" && item.checkList.length === 0) || (item.type === "si" && item.inputValue.trim().length === 0) || (item.type === "mi" && item.choice.some((ccc) => ccc.inputValue.trim().length === 0))) {
            this.errorIndex = index
            this.$alert('有尚未完成的题目，请完成后提交！', '提交失败', {
              confirmButtonText: '确定',
            })
            return true
          }
          this.errorIndex = -1
        })
      },
    },
    computed: {
      titleResult() {
        return function (question) {
          return question.type === "mc" ? question.title + '【多选题】' : question.title
        }
      }
    }
  }

  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#questionnaire')
</script>

</html>